<template>
	<div class="allbuju">
		<div class="register">
			<form>
				<div class="label">
					<label class="error">{{message}}</label>
					<input name="username" type="text" v-model.trim="username" placeholder="请输入用户名">
					<input type="password" v-model.trim="password" placeholder="请输入密码">
					<input type="password" v-model.trim="password2" placeholder="请输入确认密码">
					<input type="tel" v-model.trim="mobile" placeholder="请输入手机号">
				</div>
				<div class="submit">
					<input type="submit" @click.prevent="register" value="注册">
				</div>
			</form>
		</div>
	</div>
	
</template>

<script>
	export default {
		name: "UserRegister",
		data() {
			return {
				username: "",
				password: "",
				password2: "",
				message: ''
			};
		},
		watch: {
			username(newVal) {
				//取消上一次请求
				if(newVal) {
					this.cancelRequest();
					this.axios.get("/user/"+newVal, {cancelToken: new this.axios.CancelTolen(
						cancel=>this.cancel=cancel
					)}).then(response=>{
						if(response.data.code == 200) {
							let isExist = response.data.data;
							if(isExist) {
								this.message = "该用户名已存在";
							}else{
								this.message = "";
							}
						}
					}).catch(error=>{
						if(this.axios.isCancel(error)) {
							//如果是请求被取消产生的错误，输出取消请求的原因
							console.log("请求取消:", error.message);
						}
						else{
							//处理错误
							console.log(error);
						}
					});
				}
			}
		},
		methods: {
			register() {
				this.message = '';
				if(!this.checkForm())
					return ;
				this.axios.post("user/register",{username:this.username, password:this.password,mobile:this.mobile}).then(response=>{
					if(response.data.code === 200) {
						this.saveUser(response.data.data);
						this.username = '';
						this.password = '';
						this.password2 = '';
						this.mobile = '';
						this.$router.push("/");
					}else if(response.data.code === 500) {
						this.message = "用户注册失败";
					}
					}).catch(error=>{
						alert(error.message)
				})
			},
			cancelRequest() {
				if(typeof this.cancel === 'function') {
					this.cancel("终止请求");
				}
			},
			checkForm() {
				if(!this.username||!this.password||!this.password2||this,mobile) {
					window.alert("所有字段不能为空");
					return false;
				}
				if(this.password != this.password2) {
					window.alert("密码和确认密码必须相同");
					return false;
				}
				return true;
			},
		},
	}
</script>

<style>
</style>